<template>
  <div class="todo-header">
    <!-- keyup.enter指的是enter键键入后事件才会触发 -->
        <input type="text" placeholder="请输入你的任务名称，按回车键确认"
        v-model="title" @keyup.enter="addItem"/>
      </div>
</template>

<script>
export default {
  props:{//声明接收addTodo函数
    

  },
 /*  表单绑定了v-model后一定要写data()
  返回的是绑定的变量这里是title */
  data(){
    return{
      title:''
    }
  },

  methods:{
    addItem(){
      //1.检查输入的合法性
      const title = this.title.trim();
      if(!title){
        alert('必须输入title!');
        return;
      }

      // 2.根据输入生成一个todo对象
      const todo={
        title,
        complete: false,
      }
      // 3.添加到todos数据在哪更新数据的行为就在哪里，数据在App.vue那里
      // this.addTodo(todo);//因为props接收了addTodo这个函数，所以在这里直接调用
      //触发自定义事件：addTodo，事件名和回调函数的参数（去addTodo方法看）
      this.$emit('addTodo',todo)
      // 4.清除输入
      this.title = '';
    }

  }

}
</script>

<style>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>